<template>
  <div>
    <h1>这里是分析数据的组件</h1>
    <div id="echarts" :style="{width: '700px', height: '300px'}"></div>
  </div>
</template>
<script>
import axios from "../plugins/axios"; //在哪里用就在哪里引入
// require("@/mock/analyzeInfo.js");
export default {
  data() {
    return {
      analyze_Info: [],
      arrTem: [],
      arrHum: [],
      arrName: [],
      arrType: [],
      arrCon: [],
      series: []
    };
  },
  watch: {
    arrName: function(val) {
      console.log("test" + val);
      if (this.arrName.length > 3) {
        this.arrName.shift();
      }
      this.arrName = val;
      console.log(this.arrName);
    },
    arrTem: function(val) {
      if (this.arrTem.length > 3) {
        this.arrTem.shift();
      }
    },
    arrHum: function(val) {
      if (this.arrHum.length > 3) {
        this.arrHum.shift();
      }
    },
    arrCon: function(val) {
      if (this.arrCon.length > 3) {
        this.arrCon.shift();
      }
    }
  },
  created: function() {
    this.getInfo();
  },
  mounted() {
    
  },
  methods: {
    
    getInfo() {
      // socket.on("analyzeInfo").then(res=>{
      //   this.arrCon.push();
      // })

      let count = 1;
      setInterval(() => {
        axios
          .get("/action/analyzeInfo")
          .then(response => {
            this.analyze_Info = response.data.data;
            
            // var that =this
            // for(let i=0;i<that.arrType.length;i++){
            //     that.series[i].name=that.arrType[i]
            // }

            for (let i = 0; i < 3; i++) {
              // this.arrType.push()
              if (count == 1) {


               this.arrType = response.data.type;
                 console.log("type" + this.arrType);
                for (let j = 0; j < 3; j++) {
                  this.arrName.push(this.analyze_Info[j].name);
                }
                count--;
              }
              this.arrTem.push(this.analyze_Info[i].tem );
              this.arrHum.push(this.analyze_Info[i].hum);
              this.arrCon.push(this.analyze_Info[i].con);
            }
            console.log(this.arrName);
            for (let m = 0; m < 3; m++) {
              console.log("名字:" + this.arrName[m]);
              console.log("温度:" + this.arrTem[m]);
              console.log("湿度:" + this.arrHum[m]);
              console.log("浓度" + this.arrCon[m]);
            }
            this.drawLine();
          })
          .catch(error => {
            console.log(error);
            //  alert('网络错误');
          });
      }, 3000);
    },
    // reArrName(){
    //   var arrN=[];
    //   for(let i=0;i<3;i++){
    //     arrN.push(arrName[i])
    //   }
    //   return arrName[0]
    // },
    drawLine() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("echarts"));
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: this.arrType
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.arrName
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "温度",
            type: "line",
            data: this.arrTem
          },
          {
            name: "湿度",
            type: "line",
            data: this.arrHum
          },
          {
            name: "浓度",
            type: "line",
            data: this.arrCon
          }
        ]
      });
    }
  }
};
</script>